<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const shopId = route.params.id

// 店铺信息
const shopInfo = ref({
  id: shopId || '1',
  name: '优品时尚旗舰店',
  logo: 'https://img.alicdn.com/imgextra/i1/O1CN01Z7X5Xs1vX5Xs1vX5_!!6000000006453-2-tps-100-100.png',
  banner: 'https://img.alicdn.com/imgextra/i2/O1CN01Z7X5Xs1vX5Xs1vX6_!!6000000006454-2-tps-1200-300.png',
  description: '专注于高品质时尚服饰，为您带来最潮流的穿搭体验',
  rating: 4.8,
  sales: 12580,
  productsCount: 256,
  followers: 8932,
  isFollowed: false,
  contactInfo: {
    phone: '400-123-4567',
    businessHours: '9:00-22:00',
    address: '上海市浦东新区张江高科技园区'
  }
})

// 店铺商品列表
const shopProducts = ref([
  {
    id: 1,
    name: '时尚连衣裙夏季新款',
    price: 199,
    originalPrice: 299,
    sales: 1234,
    image: 'https://img.alicdn.com/imgextra/i1/O1CN01e0Z4fO1yG7g7Q1Zfo_!!6000000006889-0-picassoopen.jpg',
    category: '女装'
  },
  {
    id: 2,
    name: '女士手提包百搭时尚',
    price: 259,
    originalPrice: 399,
    sales: 892,
    image: 'https://img.alicdn.com/imgextra/i2/O1CN01z8X2ZQ1vJ1z6Z8X2Z_!!6000000006227-0-picassoopen.jpg',
    category: '箱包'
  },
  {
    id: 3,
    name: '夏季防晒衣轻薄透气',
    price: 129,
    originalPrice: 199,
    sales: 2341,
    image: 'https://img.alicdn.com/imgextra/i3/O1CN013vR93t1eZ2wY7Y6qL_!!6000000006001-0-picassoopen.jpg',
    category: '防晒'
  },
  {
    id: 4,
    name: '时尚太阳镜UV400防护',
    price: 89,
    originalPrice: 159,
    sales: 1567,
    image: 'https://img.alicdn.com/imgextra/i4/O1CN01X0FzNQ27YtU4K2bVQ_!!6000000007990-0-picassoopen.jpg',
    category: '配饰'
  }
])

// 切换关注状态
const toggleFollow = () => {
  shopInfo.value.isFollowed = !shopInfo.value.isFollowed
  shopInfo.value.followers += shopInfo.value.isFollowed ? 1 : -1
  alert(shopInfo.value.isFollowed ? '关注成功' : '取消关注')
}

// 联系商家
const contactShop = () => {
  router.push({ name: 'chat', params: { shopId: shopInfo.value.id, shopName: shopInfo.value.name } })
}

// 添加到购物车
const addToCart = (product) => {
  let cart = JSON.parse(localStorage.getItem('cart') || '[]')
  cart.push({
    ...product,
    shopId: shopInfo.value.id,
    shopName: shopInfo.value.name
  })
  localStorage.setItem('cart', JSON.stringify(cart))
  alert('已添加到购物车')
}

// 获取商品分类图标
const getCategoryIcon = (category) => {
  const icons = {
    '女装': '👗',
    '箱包': '👜',
    '防晒': '🧥',
    '配饰': '🕶️'
  }
  return icons[category] || '📦'
}

onMounted(() => {
  // 模拟从API获取店铺数据
  console.log('加载店铺ID:', shopId)
})
</script>

<template>
  <div class="shop-view">
    <!-- 店铺头部信息 -->
    <div class="shop-header">
      <img :src="shopInfo.banner" alt="店铺横幅" class="shop-banner" />
      <div class="shop-info">
        <div class="shop-logo-container">
          <img :src="shopInfo.logo" alt="店铺logo" class="shop-logo" />
        </div>
        <div class="shop-details">
          <h1 class="shop-name">{{ shopInfo.name }}</h1>
          <p class="shop-description">{{ shopInfo.description }}</p>
          <div class="shop-stats">
            <span class="stat-item">
              <span class="stat-label">店铺评分</span>
              <span class="stat-value">{{ shopInfo.rating }}</span>
            </span>
            <span class="stat-item">
              <span class="stat-label">月销量</span>
              <span class="stat-value">{{ shopInfo.sales }}</span>
            </span>
            <span class="stat-item">
              <span class="stat-label">商品数</span>
              <span class="stat-value">{{ shopInfo.productsCount }}</span>
            </span>
            <span class="stat-item">
              <span class="stat-label">关注数</span>
              <span class="stat-value">{{ shopInfo.followers }}</span>
            </span>
          </div>
        </div>
        <div class="shop-actions">
          <button class="follow-btn" :class="{ 'followed': shopInfo.isFollowed }" @click="toggleFollow">
            {{ shopInfo.isFollowed ? '已关注' : '关注店铺' }}
          </button>
          <button class="contact-btn" @click="contactShop">
            <span class="contact-icon">💬</span> 联系商家
          </button>
        </div>
      </div>
    </div>

    <!-- 商家联系方式 -->
    <div class="shop-contact-section">
      <h3>联系方式</h3>
      <div class="contact-details">
        <div class="contact-item">
          <span class="contact-label">客服电话：</span>
          <span class="contact-value">{{ shopInfo.contactInfo.phone }}</span>
        </div>
        <div class="contact-item">
          <span class="contact-label">营业时间：</span>
          <span class="contact-value">{{ shopInfo.contactInfo.businessHours }}</span>
        </div>
        <div class="contact-item">
          <span class="contact-label">店铺地址：</span>
          <span class="contact-value">{{ shopInfo.contactInfo.address }}</span>
        </div>
      </div>
    </div>

    <!-- 店铺商品列表 -->
    <div class="shop-products-section">
      <h3>店铺商品</h3>
      <div class="products-grid">
        <div v-for="product in shopProducts" :key="product.id">
          <!-- 为夏季时尚连衣裙添加特殊图片 -->
          <div v-if="product.name === '时尚连衣裙夏季新款'" class="special-product-section">
            <img src="https://i.imgur.com/example-dress.jpg" alt="夏季时尚连衣裙展示" class="special-product-image" />
            <div class="product-card">
              <div class="product-image">
                <img :src="product.image" :alt="product.name" />
            <div class="category-badge">
              <span class="category-badge-icon">{{ getCategoryIcon(product.category) }}</span>
              <span class="category-badge-name">{{ product.category }}</span>
            </div>
            <button class="add-to-cart" @click="addToCart(product)">加入购物车</button>
              </div>
              <div class="product-info">
                <div class="product-title">{{ product.name }}</div>
                <div class="product-price">
                  <span class="price">¥{{ product.price }}</span>
                  <span class="original-price">¥{{ product.originalPrice }}</span>
                </div>
                <div class="product-sales">已售 {{ product.sales }}</div>
              </div>
            </div>
          </div>
          
          <!-- 其他商品的正常展示 -->
          <div v-else class="product-card">
            <div class="product-image">
              <img :src="product.image" :alt="product.name" />
              <div class="category-badge">
                <span class="category-badge-icon">{{ getCategoryIcon(product.category) }}</span>
                <span class="category-badge-name">{{ product.category }}</span>
              </div>
              <button class="add-to-cart" @click="addToCart(product)">加入购物车</button>
            </div>
            <div class="product-info">
              <div class="product-title">{{ product.name }}</div>
              <div class="product-price">
                <span class="price">¥{{ product.price }}</span>
                <span class="original-price">¥{{ product.originalPrice }}</span>
              </div>
              <div class="product-sales">已售 {{ product.sales }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.shop-view {
  background-color: #f5f5f5;
  min-height: 100vh;
  width: 100%;
}

/* 店铺头部样式 */
.shop-header {
  width: 100%;
}

.shop-banner {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.shop-info {
  background-color: #fff;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shop-logo-container {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shop-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-details {
  flex: 1;
}

.shop-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.shop-description {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.shop-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.shop-actions {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.follow-btn {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.follow-btn:hover {
  border-color: #ff6700;
  color: #ff6700;
}

.follow-btn.followed {
  background-color: #fff2e8;
  border-color: #ff6700;
  color: #ff6700;
}

.contact-btn {
  padding: 10px 20px;
  background-color: #ff0036;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.contact-btn:hover {
  background-color: #e60029;
}

/* 联系方式区域 */
.shop-contact-section {
  background-color: #fff;
  margin: 20px 0;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shop-contact-section h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-label {
  color: #999;
  font-size: 14px;
}

.contact-value {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

/* 商品列表样式 */
.shop-products-section {
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shop-products-section h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.product-image {
  height: 250px;
  position: relative;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.category-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
}

.add-to-cart {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background-color: #ff0036;
  color: white;
  border: none;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.product-card:hover .add-to-cart {
  opacity: 1;
}

/* 特殊商品图片样式 */
.special-product-section {
  margin-bottom: 30px;
}

.special-product-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.add-to-cart:hover {
  background-color: #e60029;
}

.product-info {
  padding: 15px;
}

.product-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  margin-bottom: 5px;
}

.price {
  font-size: 18px;
  color: #ff0036;
  font-weight: bold;
  margin-right: 5px;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-sales {
  font-size: 12px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .shop-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .shop-stats {
    justify-content: center;
    gap: 20px;
  }
  
  .shop-actions {
    flex-direction: row;
  }
  
  .contact-details {
    flex-direction: column;
    align-items: center;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>